<template>
  <Header></Header>
  <div class="articles-container">
    <div>
      <div class="path-container">
        <div class="path">
          <ul>
            <li>
              <a href="/">首页</a>
            </li>
            <li v-if="typeList" class='gt'>&gt;</li>
            <li v-if="typeList" v-for="(item,index) in typeList" :key="index" class="current">
              <a href="javascript:void(0);" class="navigation_style">{{ item.typeName }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="margin-top:10px;">
      <div class="articles-container-left">
        <ul v-loading="loading" class="timenewslist">
          <li v-if="list" v-for="(item,index) in list" :key="index" class="clearfix">
            <div class="mtime">
              <span>{{ parseTime(item.createTime, '{d}') }}</span>{{
                parseTime(item.createTime, '{y}')
              }}.{{ parseTime(item.createTime, '{m}') }}
            </div>
            <div class="newscontent">
              <h3>
                <a href="javascript:void(0);"
                   class="jiequ" @click="goDetail(item.typeIds[0],item.id)">【{{ item.types[0].typeName }}】{{
                    item.title
                  }}</a>
              </h3>
              <p>{{ item.articleDesc }}</p>
            </div>
          </li>
        </ul>
        <div class="el-pagination">
          <el-pagination
              background
              hide-on-single-page
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>
<script setup lang="ts">
import Header from "@/views/components/header.vue";
import Footer from "@/views/components/footer.vue";
import {ref} from "vue";
import {pageArticles} from "@/api/article"
import {useRouter} from "vue-router";
import {parseTime, cutString} from '@/utils/linyang'
import {selectTypePath} from '@/api/type'

const _router = useRouter();

const list = ref([]);
const total = ref(0);
const pageNum = ref(0);
const pageSize = ref(15);

const loading = ref(false);

const selectlist = (page, size) => {
  loading.value = true;
  let params = {
    pageNum: page,
    pageSize: size,
    typeId: _router.currentRoute.value.query.typeId
  };
  pageArticles(params).then(res => {
    console.log("list is", res);
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}


const handleCurrentChange = (page) => {
  pageNum.value = page;
  selectlist(pageNum.value, pageSize.value);
}

selectlist(pageNum.value, pageSize.value);


const typeList = ref([]);

selectTypePath(_router.currentRoute.value.query.typeId).then(res => {
  typeList.value.push(res.data);
  //console.log(typeList.value);
});


const goDetail = (typeId, articleId) => {
  _router.push({
    name: 'articleDetail',
    query: {typeId, articleId}
  });
}

</script>
<style scoped>
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>